<template>
	<view>
		<view style="text-align: center;padding-top: 100px;">
			<span v-if="isPassword" style="font-size: large;">请输入<span style="color: red;">支付密码</span></span>
			<span v-if="!isPassword" style="font-size: large;color: red;">密码错误</span>
		</view>
		<view style="padding-top: 40px;text-align: center;display: flex;justify-content:center;" @click="kaijianpan()">
			<input disabled class="pass" type="password" v-model="one" value="">
			<input disabled class="pass" type="password" v-model="two" value="">
			<input disabled class="pass" type="password" v-model="three" value="">
			<input disabled class="pass" type="password" v-model="four" value="">
			<input disabled class="pass" type="password" v-model="five" value="">
			<input disabled class="pass pass_right" type="password" v-model="six" value="">
		</view>
		<u-keyboard mode="number" @change="valChange" @backspace="backspace" :tooltip="false" :dot-enabled="false" :mask="false" v-model="show"></u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				one:'',
				two:'',
				three:'',
				four:'',
				five:'',
				six:'',		// 文本框的值
				value:'',	// 键盘输入的值
				show:false,	// 是否显示键盘
				jifenPay:0, // 输入的积分
				payPrice:0, // 需支付的金额
				ddhao:'',   // 订单号unionid
				isPassword:true,//密码是否正确（默认为true）
				ppId:'',		//品牌ID
				id:'',			//类型（1：申请自提点支付）
			}
		},
		onLoad(opt) {
			this.jifenPay = opt.jifenPay;
			this.payPrice = opt.payPrice;
			this.ddhao = opt.ddhao;
			this.ppId = opt.ppId;
			this.id = opt.id;
		},
		methods: {
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				if(this.isNull(this.one)){
					this.one = val;
				}else if(this.isNull(this.two)){
					this.two = val;
				}else if(this.isNull(this.three)){
					this.three = val;
				}else if(this.isNull(this.four)){
					this.four = val;
				}else if(this.isNull(this.five)){
					this.five = val;
				}else if(this.isNull(this.six)){
					this.six = val;
				}
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val;
				if(this.value.length==6){
					// 验证支付密码
					this.$http.get('/apppay.do',{
						p:'checkPayPwdxcx',
						userid:uni.getStorageSync('usersId'),
						pwd:this.value
					}).then(res => {
						console.log("验证密码状态："+res.data.code)
						if(res.data.code==200){//密码正确
							// 支付
							this.$http.get('/ppOrderPay/userPingpaiJifenPayxcx',{
								userId:uni.getStorageSync('usersId'),
								jifen:this.payPrice,
								ppId:this.ppId
							}).then(res => {
								console.log("支付情况")
								console.log(res)
								uni.$emit('checkPinpaiUserInfo');	//品牌共享个人中心加载用户数据
								uni.$emit('getPinpaiOrderByGroup');	//品牌共享个人中心加载订单状态数量
								if(res.data.code==200){//支付成功，跳支付成功页面
									uni.navigateTo({
										url:'paySuccess'
									})
								}else{//跳支付失败页面
									this.$u.toast(res.data.msg)
									uni.navigateTo({
										url:'payFail'
									})
								}
							})
						}else{//密码错误
							this.value = '';
							this.one = '';this.two = '';this.three = '';this.four = '';this.five = '';this.six = '';
							this.isPassword = false
							this.$u.toast(res.data.msg)
						}
					})
				}
			},
			// 退格键被点击
			backspace() {
				if(!this.isNull(this.six)){
					this.six = '';
				}else if(!this.isNull(this.five)){
					this.five = '';
				}else if(!this.isNull(this.four)){
					this.four = '';
				}else if(!this.isNull(this.three)){
					this.three = '';
				}else if(!this.isNull(this.two)){
					this.two = '';
				}else if(!this.isNull(this.one)){
					this.one = '';
				}
				// 删除value的最后一个字符
				if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
			},
			isNull(str){
				return str==null || str=="" || str==undefined
			},
			// 打开键盘
			kaijianpan(){
				this.show = true;
			}
		},
		onReady() {
			// 如果想一进入页面就打开键盘，请在此生命周期调用
			this.show = true;
		},
	}
</script>

<style>
	.pass {
		font-size: 40px;
		text-align: center;
		width: 45px;
		height: 50px;
		border-left: 1px solid;
		border-bottom: 1px solid;
		border-top: 1px solid;
	}
	.pass_right {
		border-right: 1px solid
	}
</style>
